<template>
  <div class="activity-detail" v-if="detailInfo">
    <Scroll class="scroll-container">
      <div class="inner">
        <div class="swiper-container">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(item, index) of detailInfo.banners" :key="index">
              <img :src="item" alt style="width: 100%" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div class="content">
          <div class="detail-title">{{detailInfo.name}}</div>
          <div class="info-box">
            <div class="status">
              <i></i>
              <span>{{new Date(detailInfo.end_at.replace(/-/g,'/')).getTime() >= new Date().getTime() ? '报名中' : '已结束'}}</span>
            </div>
            <div class="time">
              <i></i>
              <span>{{detailInfo.start_at}}</span>
            </div>
            <div class="address">
              <i></i>
              <span>{{detailInfo.address}}</span>
            </div>
          </div>
          <div class="intro-info">
            <div class="info-title">
              <i></i>
              <span>活动详情</span>
            </div>
            <div class="info-txt" v-if="detailInfo.detail" v-html="detailInfo.detail"></div>
            <div class="no-msg" v-else>暂无内容...</div>
          </div>
        </div>
      </div>
    </Scroll>
    <div
      class="btn"
      v-if="new Date(detailInfo.end_at.replace(/-/g,'/')).getTime() >= new Date().getTime()"
    >
      <div class="btn-box">
        <my-button name="立即报名" @btnClick="handleSignClick" />
      </div>
    </div>
    <Tip ref="join" class="join">
      <div class="txt">
        <p>仅限会员设计师报名哦~</p>
        <p>马上加入我们，专享特权享不停~</p>
      </div>
      <my-button name="加入DDS·C" @btnClick="handleJoinClick" />
    </Tip>
    <Tip ref="joinConfirm" title="确认报名吗？" :showClose="false">
      <div class="btn-wrapper">
        <my-button name="确认" @btnClick="handleConfirm" />
        <my-button name="取消" @btnClick="handleCancel" :showBg="false" />
      </div>
    </Tip>
    <Tip ref="showSignUp">
      <p class="sign-txt" style="margin-top: 0.5rem;">活动马上就要开始啦</p>
      <p class="sign-txt">立即签到即可获得积分哦～</p>
      <my-button name="确认签到" @btnClick="confirmSignUp" />
    </Tip>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import Tip from '@/components/tip/tip'
import { getActivityDetail, signUpActivity } from '@/api/home'
import { signInActivity } from '@/api/pay'
const ERR_OK = 200
export default {
  components: {
    Scroll,
    Tip
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      },
      detailInfo: null,
      userInfo: null,
      activity_id: ''
    }
  },
  mounted () {
    setTimeout(() => {
      if (window.location.hash.includes('activity_id')) {
        this.showSignUp()
        const hash = window.location.hash
        this.activity_id = hash.split('activity_id=')[1]
      }
    }, 500)
  },
  created () {
    if (localStorage.getItem('USER')) {
      this.userInfo = JSON.parse(localStorage.getItem('USER'))
    }
    this._getActivityDetail({
      id: this.$route.params.id
    })
  },
  methods: {
    confirmSignUp () {
      this._signInActivity(this.activity_id).then(res => {
        if (res.code === ERR_OK) {
          this.$refs.showSignUp.hide()
          this.$router.replace({ path: '/sign-in', query: { info: res.data } })
        } else {
          this.$toast('签到失败~')
        }
      })
    },
    showSignUp () {
      this.$refs.showSignUp.show()
    },

    handleSignClick () {
      console.log(this.userInfo)
      if (this.userInfo && parseInt(this.userInfo.identity_type)) {
        this.$refs.joinConfirm.show()
      } else if (this.userInfo) {
        this.$refs.join.show()
      } else {
        const me = this
        this.$toast({
          message: '暂未登陆~',
          duration: 1500,
          onClose: function () {
            me.$router.push({ path: '/login' })
          }
        })
      }
    },
    handleJoinClick () {
      this.$refs.join.hide()
      // this.$refs.joinConfirm.show()
      this.$router.push('/designer/poster')
    },
    handleConfirm () {
      this.$refs.joinConfirm.hide()
      this._signUpActivity(this.$route.params.id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$toast({
              message: '报名成功 可在我的活动中查看'
            })
          } else {
            this.$toast({
              message: res.message,
              duration: 1000
            })
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast(err.data.message)
          // const time = setTimeout(() => {
          //   this.$router.push('/designer/poster')
          //   time && clearTimeout(time)
          // }, 1000)
        })
    },
    handleCancel () {
      this.$refs.joinConfirm.hide()
    },
    _signInActivity (activityId) {
      return signInActivity(activityId)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$toast('签到成功~')
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getActivityDetail ({ id }) {
      getActivityDetail({ id })
        .then(res => {
          if (res.code === ERR_OK) {
            this.detailInfo = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _signUpActivity (id) {
      return signUpActivity(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          return Promise.reject(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.sign-txt {
  width: 2.82rem;
  margin: 0 auto;
  font-size: 0.23rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 4, 0, 1);
  line-height: 0.38rem;
  text-align: center;
  white-space: nowrap;
}
.activity-detail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: #fff;
  touch-action: none;
  .scroll-container {
    width: 100%;
    height: 100%;
    .inner {
      padding-bottom: 1.44rem;
    }
  }
  .swiper-container {
    width: 100%;
    // height: 4.54rem;
  }
  .swiper-pagination {
    vertical-align: middle;
  }
  .swiper-container /deep/ .swiper-pagination-bullet-active {
    width: 0.2em;
    height: 0.2rem;
    border: 1px solid rgba(0, 4, 0, 1);
    background: transparent !important;
    border-radius: 50%;
  }
  .swiper-container /deep/ .swiper-pagination-bullet {
    width: 0.12rem;
    height: 0.12rem;
    background: rgba(0, 4, 0, 1);
    border-radius: 50%;
    transition: all 0.3s;
  }
  .content {
    padding: 0 0.36rem;
    box-sizing: border-box;
    .detail-title {
      width: 100%;
      padding: 1rem 0;
      font-size: 0.38rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(0, 4, 0, 1);
      line-height: 0.6rem;
      white-space: pre-wrap;
      border-bottom: 1px solid #eeeeee;
    }
    .info-box {
      width: 100%;
      & > div {
        width: 100%;
        height: 1.02rem;
      }
      .status,
      .time,
      .address {
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          width: 0.45rem;
          height: 0.42rem;
          background: url("../../../assets/images/bominz.png") no-repeat;
          background-size: cover;
        }
        span {
          flex: 1;
          display: inline-block;
          font-size: 0.25rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(0, 4, 0, 1);
          line-height: 1.02rem;
          text-align: left;
          border-bottom: 1px solid #eeeeee;
          margin-left: 0.52rem;
        }
      }
      .time {
        i {
          height: 0.45rem;
          width: 0.45rem;
          background: url("../../../assets/images/icon_sjj.png") no-repeat;
          background-size: cover;
        }
      }
      .address {
        border-bottom: 1px solid #eeeeee;
        i {
          width: 0.4rem;
          height: 0.44rem;
          background: url("../../../assets/images/icon_dz.png") no-repeat;
          background-size: cover;
        }
      }
    }
    .intro-info {
      .info-title {
        i {
          display: inline-block;
          width: 0.24rem;
          height: 0.06rem;
          background: rgba(4, 36, 45, 1);
          vertical-align: bottom;
          margin-right: 0.1rem;
        }
        span {
          font-size: 0.38rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(0, 4, 0, 1);
          line-height: 0.3rem;
        }
      }
      .info-txt {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.57rem;
        margin-top: 0.4rem;
        /deep/ img {
          width: 100%;
          margin-bottom: 0.1rem;
        }
      }
      .no-msg {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ccc;
        line-height: 1rem;
        text-align: center;
      }
    }
  }
  .btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.44rem;
    border-top: 1px solid rgba(238, 238, 238, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    .btn-box {
      width: 6.78rem;
      font-size: 0;
    }
  }
  .join {
    .txt {
      margin-top: 1rem;
      p {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.57rem;
        text-align: center;
      }
    }
  }
}
</style>
